<!DOCTYPE html>
<html>
<head>
    <title>tooltip framework</title>
    <link rel="stylesheet" href="style.css" />
 </style>
</head>

<body>
<div class="help">
<span class="hastooltip helpitem" data-tipid="tipHelp">Help</span>
<span class="hastooltip helpitem" data-tipid="technical">Help (technical)</span>
<span class="hastooltip helpitem" data-tipid="alternative" data-tipwidth="250">Use as Menu?</span>
<h2 style="text-align:center;margin-top:-1.4em;margin-left:15em;display:inline-block;">Tooltip 2.0 framework (demo and instruction)</h2></span>
<span style="float:right;padding-right:1em;color:#999;">&copy; 2012-2016
 <span class="hastooltip clean" data-tipid="license" data-tipwidth="300">NICon</span>
</div>

<p><input type="checkbox" onclick="TIPS.settings.dragcontent.switch();"/>
<span class="hastooltip" data-tiptext="check to show content while mo&shy;ving a fix&shy;ed tool&shy;tip, or un&shy;check to use a (de&shy;tach&shy;ed) drag box" data-tipwidth="200">change drag method</span>
</p>

<p><span class="hastooltip" data-tipid="version">Version information</span></p>

<p>A small <span class="hastooltip" data-tiptext="2011-2012">tooltip</span> without a header</p>

<p>A refreshable <span
   class="hastooltip" data-tiptext="click to refresh contents (and add a header)"
   onclick="TIPS.refresh(this,{head: 'Header added', text:'Content refreshed '+(new Date().toLocaleString())+'<br />click to re-refresh'},true);">tooltip</span>

<p><span title="click to create a tooltip" style="color:red; cursor:pointer" id="testCreate" onclick="TIPS.create(this,{'head':'I just have been freshly created','text':'And here your text'});this.style.color='';this.title=''">create a tooltip</span></p>

<p>Error message in tooltip (the tooltip initialisation <span class="hastooltip" data-text="this tooltip won't work" data-header="hithere"onmouseover = "TIPS.settings.silenterror('false')">fails</span> (<code>TIPS.settings.silenterror('false')</code>))

<p>Error message in title (the tooltip initialisation <span class="hastooltip" data-text="this tooltip won't work" data-header="hithere">fails</span>, but it's only reflected in a small title (default setting)


<span style="position:absolute; display:inline-block; right: 20px;margin-top: 0">
  this tip will move into the visible part of the <span class="hastooltip" data-tipid="leftScrolledFirst">screen</span>
</span>
</p>

<div style="height: 2000px">&nbsp;</div>

<div id="scroller" style="position:absolute; bottom:20px;">
 <span class="hastooltip" data-tipid="largeTip">this tooltip may move upward</span> (if this line is @ the bottom of the screen)</div>

<!-- tips here -->
<span class="tipContent" id="foutafvang">
    <span class="header">error handling</span>
    <span class="tbody">the tooltip next to this text (<i>placerat in elementum</i>)
    was not declared the right way and thus will not be generated on hovering the text.
    Instead, an error message is displayed in a custom tooltip.</span>
</span>

<span class="tipContent" id="tipHelp">
    <span class="header">tooltip howTo</span>
    <span class="tbody">
        <ul style="margin-left:-1em">
         <li>You already noticed: moving your mouse pointer over text that looks
           <span class="ttdemo">like this</span> makes a
           <span class="hastooltip" data-tipid="tooltipexplain" data-tipwidth="250">tooltip</span> appear.
           You can make it disappear by moving your mouse away</li>
         <li>You can also move your mouse pointer <i>into</i> a tooltip, to copy text or
          in case of a larger tooltip scroll down to read more.</li>
         <li>While your mouse pointer resides
          above a tooltip, the tooltip will not close. This also is true for tooltips within
          tooltips (aka <i>nested</i> tooltips).</li>
         <li>If a tooltip is larger than the current bottom or right border of your screen, it
            will move into vision. If the top of tooltip would be above the top of your screen,
            it scrolls down until it's visible.</li>
         <li>If a tooltip has a header, you can <i>fix</i> it (keep it visible) on your screen by clicking on the originating text
         or the tooltip header</li>
         <li>A thus fixed tooltip can be <i>dragged</i> to another position on your screen by
         keeping your left mousebutton pressed on its header and dragging it around.</li>
         <li>A fixed tooltip can be <i>minimized/&shy;maximized</i>, using the arrow symbol at the right of the header</li>
         <li>A fixed tooltip containing a scrollbar can be <i>resized</i> horizontally (to twice its width)
         by dragging the right border, and vertically (until twice its height or until the
         scrollbar disappears) by dragging the bottom border.
         <li>If you want to use the tooltip framework,
         check this bit of <span class="hastooltip" data-tipid="technical">technical information</span>
         <li>That's all, basically. The remainder of this page present a few examples of the frameworks usage possibilities. Enjoy!</li>
        </ul>
    </span>
</span>

<span class="tipContent" id="tooltipexplain">
 <span class="tbody white">
    The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear &#8212; a small "hover box" with information about the item being hovered over.<br />
    (Source: <a class="hastooltip" data-tiptext="[link] opens in new tab/window" href="http://en.wikipedia.org/wiki/Tooltip" target="_blank">wikipedia</a>)
 </span>
</span>

<span class="tipContent" id="technical">
    <span class="header">tooltip howTo (technical)</span>
    <span class="tbody">
        <p>This tooltip framework contains plain vanilla ECMAscript. The script is 'compiled' using
         Googles <a target="_blank" class="hastooltip" data-tiptext="[link] opens in new tab/window"
         href="http://closure-compiler.appspot.com/home">closure compiler</a>.
         Include (and/or adjust)the css-file of this document
         (<a class="hastooltip" data-tiptext="[link] opens in new tab/window"
         href="style.css" target="blank">style.css</a>, in the header) and the javascript file
         (<a class="hastooltip" data-tiptext="[link] opens in new tab/window"
          href="tipscompiled.js" target="blank">tipscompiled.js</a>,
         at the end of the body, right before &lt;/body>) in your html and you can create your own tooltips.
        </p>
        <p>There are three ways to create a tooltip.</p>
        <ul style="margin-left:-1em; margin-top:0">
        <li/>The first (preferred for longer tooltips) method is using a
         <span class="hastooltip" data-tipid="tech2">html div or span</span>
         containing tip text and/or a header element<br />
        <li/>Using <span class="hastooltip" data-tipid="tech4">data-attributes </span>
         is the second (preferred for short tooltips) method
        <li/>The third way is using <span class="hastooltip" data-tipid="tech3">javascript.</span>
        </ul>
        <p>The script is tested in the latest versions of Firefox, Chrome, Opera, Safari,
        Mobile Android and Internet Explorer (v>=8).
        For IE&lt;9 some fancy styling will not render.
        For the mobile Androidbrowser tips are (de)activated by a 'fingerclick'</p>
    </span>
</span>

<span class="tipContent" id="tech4">
    <span class="header">using data attributes</span>
    <span class="tbody">create a <code>&lt;span></code> element with <code>class="hastooltip"</code>
    and 1 or 2 data-attributes:
<pre>&lt;span class="hastooltip"
       <span style="color:green">data-tipheader="a header"
       data-tiptext="some tooltip text"</span>>
 create me!
&lt;/span></pre>
    Which 'in real life' resolves to:
    <span class="hastooltip" data-tipheader="a header" data-tiptext="some tooltip text">create me!</span>
    </span>
</span>

<span class="tipContent" id="tech2">
    <span class="header">html tip repository</span>
    <span class="tbody">
      Create your tip (within your html, make sure the element gets a unique id):
<pre>&lt;span class="tipContent"
      <span style="color:green">id="simpleExternal"</span>>
  &lt;span class="header">
   simple header
  &lt;/span>
  &lt;span class="tbody">
   The actual tip content
  &lt;/span>
&lt;/span></pre>
      Now you can address your tooltip using
      <pre>&lt;span class="hastooltip"
      <span style="color:green">data-tipid="simpleExternal"</span>>
      ...
&lt;/span></pre>
    </span>
</span>

<span class="tipContent" id="tech3">
    <span class="header">using javacript</span>
    <span class="tbody">
        The framework provides a method <code>create</code> in the <code>TIPS</code> namespace, which
        takes 2 arguments: the element you want to create the tip for, and
        an object containing the tip information. Say you have a &lt;span>
        with id "newtip", and you want to show extra information. The code
        looks like this
<pre>TIPS.create(
  document.getElementById('newtip'),
  {
   head: 'this is a new tip',
   body: 'This is extra information'
  }
);</pre>
See the example (red colored text) in this document.
    </span>
</span>


<span class="tipContent" id="leftScrolledFirst">
    <span class="tbody" style="white-space:nowrap">
     <span class="hastooltip" data-tipid="leftScrolledSecond">moved into vision</span>
    </span>
</span>

<span class="tipContent" id="leftScrolledSecond">
    <span class="tbody" style="white-space:nowrap">And this one moved into vision too</span>
</span>


<span class="tipContent" id="extTipTest">
    <span class="header">Hi, I am External</span>
    <span class="tbody">
        Some text, for the hack of it ....
        <p>Sed fermentum metus sed dolor elementum nec pharetra turpis tincidunt. Praesent felis massa, dictum bibendum bibendum ut, accumsan nec metus. Pellentesque lectus felis, rhoncus sed porta vitae, convallis a purus. Curabitur volutpat adipiscing pretium. Duis pulvinar suscipit lectus eu congue. Donec sit amet nibh leo, id suscipit risus. Vivamus sit amet nulla velit, non vehicula lacus. Maecenas aliquet tincidunt dolor non porttitor. Fusce id congue dolor. Cras ipsum libero, molestie ut congue nec, viverra in tellus. Aliquam at risus justo.</p>

<p>Curabitur auctor consequat diam, <span class="hastooltip" data-tipid="deeper">quis placerat ligula rhoncus non</span>. Fusce massa erat, sodales ut rutrum eget, bibendum rhoncus nibh. Sed laoreet molestie consectetur. In quis euismod massa. Cras dapibus turpis elementum ante faucibus lacinia. In tempus ullamcorper quam, at porta dui rhoncus nec. Nam a leo in risus tristique vulputate. Morbi ut luctus enim. Quisque a justo leo. Aliquam vel neque nec eros interdum lobortis sed at justo.</p>
    </span>
</span>

<span class="tipContent" id="deeper">
    <span class="header"><i>Third</i> level</span>
    <span class="tbody">
        This is third level nested ...<br />
        And, why not? A <span class="hastooltip" data-tipid="stilldeeper" data-tipwidth="180"><b>fourth <i>level</i></b></span>
    </span>
</span>

<span class="tipContent" id="stilldeeper">
    <span class="header"><i>Fourth</i> level (head abbreviated)</span>
    <span class="tbody">Well, what'd'ya know ...
    </span>
</span>

<span class="tipContent" id="largeTip">
     <span class="header">Large and scrollable tooltip</span>
       <span class="tbody">
        <h3 style="margin-top:0">this tip scrolls and has nested tooltips</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium hendrerit volutpat. Integer felis dui, convallis a scelerisque sit amet, <span class="hastooltip" data-tipid="extTipTest">hendrerit eget dolor</span>. Suspendisse interdum vulputate magna vel aliquam.
       Nulla aliquam tempus est a aliquam. Donec pretium dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec suscipit massa ac enim ullamcorper sed luctus ipsum interdum. In hac habitasse platea dictumst. Etiam ullamcorper arcu non sem tincidunt ut vulputate est aliquet.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut orci velit, ultrices in tincidunt at, sodales ut mauris. Maecenas in felis sed tellus luctus accumsan. Pellentesque tincidunt eros vitae leo
  <span class="hastooltip" data-tipheader="well ehr" data-tiptext="this is another tooltip, isnt it?">varius</span> sit amet malesuada tellus rhoncus. Vestibulum eget diam mi, non commodo libero. Vivamus sem justo, elementum ac ultrices quis, auctor at purus. Nunc iaculis, nisl sed tempus volutpat, ligula arcu convallis mauris, vitae pulvinar sem tellus et leo. Ut scelerisque aliquet fringilla. Ut pellentesque cursus est sit amet molestie.</p>

<p>Quisque mi nibh, condimentum sed scelerisque eu, dignissim id metus. Proin et orci velit. Sed vel justo tortor. Phasellus vitae tellus nec ligula tristique vestibulum a sed diam. Etiam velit turpis, imperdiet sed posuere quis, iaculis vehicula magna. Nulla ac leo ut quam vulputate fringilla sed quis nunc. Fusce risus augue, posuere ut accumsan nec, viverra eu quam. Suspendisse egestas pretium nunc vitae sagittis. Donec lacus risus, pretium convallis facilisis eu, rhoncus ac orci. Proin mauris nulla, fermentum vitae fringilla vitae, pretium a arcu. Suspendisse laoreet dui id metus condimentum cursus placerat est volutpat. Nulla tincidunt iaculis sapien, imperdiet varius leo molestie ac. Praesent ultricies volutpat nibh, et laoreet lacus aliquam a. Fusce arcu leo, lacinia eu aliquam convallis, lobortis nec tortor. Maecenas risus orci, placerat in elementum non, accumsan quis orci. In iaculis tempus velit, ac consectetur velit mollis at.</p>

<p>Sed fermentum metus sed dolor elementum nec pharetra turpis tincidunt. Praesent felis massa, dictum bibendum bibendum ut, accumsan nec metus. Pellentesque lectus felis, rhoncus sed porta vitae, convallis a purus. Curabitur volutpat adipiscing pretium. Duis pulvinar suscipit lectus eu congue. Donec sit amet nibh leo, id suscipit risus. Vivamus sit amet nulla velit, non vehicula lacus. Maecenas aliquet tincidunt dolor non porttitor. Fusce id congue dolor. Cras ipsum libero, molestie ut congue nec, viverra in tellus. Aliquam at risus justo.</p>

<p>Curabitur auctor consequat diam, quis placerat ligula rhoncus non. Fusce massa erat, sodales ut rutrum eget, bibendum rhoncus nibh. Sed laoreet molestie consectetur. In quis euismod massa. Cras dapibus turpis elementum ante faucibus lacinia. In tempus ullamcorper quam, at porta dui rhoncus nec. Nam a leo in risus tristique vulputate. Morbi ut luctus enim. Quisque a justo leo. Aliquam vel neque nec eros interdum lobortis sed at justo.</p>
</span>

</span>

<span class="tipContent" id="smallExt">
    <span class="tbody">Sed fermentum metus sed dolor.</span>
</span>

<span class="tipContent" id="xhrTest">
   <span class="header">xhr tooltip test</span>
    <span class="tbody"></span>
</span>

<span class="tipContent" id="version">
    <span class="tbody">
        RTM version. See also the
        <a class="hastooltip" data-tiptext="link opens in new window/tab" target="_blank" href="http://tooltips.codeplex.com/">codeplex repository</a>
   </span>
  </span>
</span>


<span class="tipContent" id="closerNotes">
    <span class="header">fixed tooltip usage notes</span>
    <span class="tbody">
        <p>You can drag this box to another position on your screen (move you mouse pointer
        into the header, press and keep its left button down while
        moving the mouse around).</p>
        <p>If you activate the tooltip again and the previously fixed tooltip is still open,
        that [fixed tooltip] will be shown at position where it was closed before.</p>
        <p>A fixed tooltip can be <i>minimized/&shy;maximized</i> using the arrow symbol
        at the left of the pin symbol in the header</p>
    </span>
</span>

<span class="tipContent" id="submenu1">
    <span class="tbody">
     first<br />
     <span class="hastooltip" data-tipid="submenu11">second</span>
    </span>
</span>

<span class="tipContent" id="submenu2">
    <span class="header">item 2.1</span>
    <span class="tbody">
     <span class="hastooltip" data-tipid="submenu21">Endless nesting</span>
    </span>
</span>

<span class="tipContent" id="submenu21">
    <span class="header">item 2.1.1</span>
    <span class="tbody">
     <span class="hastooltip" data-tipid="submenu211">Endless nesting (ctnd)</span>
    </span>
</span>

<span class="tipContent" id="submenu211">
    <span class="header">item 2.1.1.1</span>
    <span class="tbody">
     <span class="hastooltip" data-tipid="submenu2111">Endless nesting (ctnd)</span>
    </span>
</span>

<span class="tipContent" id="submenu2111">
    <span class="header">item 2.1.1.1.1</span>
    <span class="tbody">
     <span class="hastooltip" data-tipid="submenu21111">Endless nesting (ctnd)</span>
    </span>
</span>

<span class="tipContent" id="submenu21111">
    <span class="header">item 2.1.1.1.1.1</span>
    <span class="tbody">
     etcetera etcetera
     <span class="hastooltip" data-tiptext="well, that's enough
      <span class='hastooltip' data-tiptext='ok, ok it stops here!'>now</span>">etcetera</span>
    </span>
</span>


<span class="tipContent" id="submenu11">
    <span class="tbody">
     <span class="hastooltip" data-tipid="submenu111">third</span>
    </span>
</span>

<span class="tipContent" id="submenu111">
    <span class="header">fourth menu item</span>
    <span class="tbody">
     number four!
    </span>
</span>

<span class="tipContent" id="license">
  <span class="header">License information</span>
  <span class="tbody">
      <div style="width:95%">
      <p><a class="hastooltip" data-tiptext="click to open License information in a new tab/&shy;window" data-tipwidth=150
            rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">
         <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png"
              style="float:left"/></a>
       This work is licensed under a <i>Creative Commons Attribution-ShareAlike 3.0 Unported License</i>.
      </p>
      <p>Please use the following <i>attribution</i> information when you use or alter the script:</p>

      <p style="border:1px solid #999;padding:6px;">
        <span style="color:red">This script originates from</span>:<br />
        <b>N</b>etwork &amp; <b>I</b>nternet<b>Con</b>sultancy<br />
        Script author: <a class="hastooltip" data-tiptext="click to send e-mail" href="mailto:l.kooi@nicon.nl">Renzo Kooi</a><br />
        Location: The Netherlands
      </p>
      </div>
  </span>
</span>

<span class="tipContent" id="alternative">
    <span class="header">Use as dropdown menu?</span>
    <span class="tbody">
        I suppose the framework could also be used to create a dropdown menu. Here's a mockup without extra styling.
        <ul>
         <li class="hastooltip" data-tipid="submenu1">Menu Item 1</li>
         <li class="hastooltip" data-tipid="submenu2">Menu Item 2</li>
        </ul>
    </span>
</span>

<script src="tipscompiled.js" type="text/javascript"></script>
</body>
</html>
